<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            color: #333333;

        }

        #uu {
            margin: 0;
            padding: 0;
            display: flex;
            width: 440px;
            list-style: none;
            justify-content: space-evenly;
            cursor: pointer;

        }

        #uu li > img {
            width: 100px;
        }
        #big{
            position: relative;
            width: 400px;
            height: 250px;
        }
        #big img{
            width: 400px;
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
<h2>美女画廊</h2>
<ul id="uu">
    <li><img src="images/1-small.jpg" alt="美女A"></li>
    <li><img src="images/2-small.jpg" alt="美女B"></li>
    <li><img src="images/3-small.jpg" alt="美女C"></li>
    <li><img src="images/4-small.jpg" alt="美女D"></li>
</ul>
<div id="big">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/placeholder.png" alt="">
</div>
<span id="text">选择一个图片</span>


<script src="jquery-3.4.1.min.js"></script>
<script>
    $(function ($) {
        $("#uu").on("click","li",function () {
            $("#big img").eq($(this).index()).show().siblings().hide();
            $("#text").text($(this).children("img").attr("alt"));
        });

    });
</script>
</body>
</html>